<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
<template>
	<view class="cc-banner-wrap" :style="{height:wrapHeight}">
		<!--banner的背景 -->
		<view class="cc-banner-wrap__bgSwiper">
			<image class="cc-banner-wrap__bgSwiper__item" v-for="(item, index) in list" :src="item.bgImage"
				:style="{ opacity: index == currentIndex ? 1 : 0,transition: 'opacity '+transitionDuration+'s'}"
				:key="index" lazy-load="true">
			</image>
		</view>
		<!-- 封面的banner -->
		<swiper class="cc-banner-wrap__swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
			:duration="duration" @change="change" :current="currentIndex">
			<swiper-item v-for="(item,index) in list" :key="index" @click="confirm(item)">
				<image class="cc-banner-wrap__swiper__item" :src="item.image"></image>
			</swiper-item>
		</swiper>
	</view>
</template>


<script>
	export default {
		name: 'cc-banner',
		props: {
			//是否显示面板指示点
			indicatorDots: {
				type: Boolean,
				default: false
			},
			//是否自动切换
			autoplay: {
				type: Boolean,
				default: true
			},
			//自动切换时间间隔	
			interval: {
				type: Number,
				default: 5000
			},
			//轮播图滑动动画时长
			duration: {
				type: Number,
				default: 500
			},
			//过渡效果的时长
			transitionDuration: {
				type: Number,
				default: 2
			},
			//当前所在滑块的 index
			current: {
				type: Number,
				default: 0
			},
			// 轮播图高度
			height: {
				type: [Number, String],
				default: 350
			},
			//轮播图数据
			list: {
				type: Array,
				default: []
			},
		},
		data() {
			return {
				currentIndex: 0
			}
		},
		onLoad() {
			console.log();
		},
		watch: {
			current: {
				handler(val) {
					this.currentIndex = val
				},
				deep: true,
				immediate: true
			}
		},
		computed: {
			wrapHeight() {
				const heightStr = String(this.height);
				if (heightStr.endsWith("px")) {
					return heightStr;
				} else {
					return heightStr + "px";
				}
			}
		},
		methods: {
			change(e) {
				this.$emit("change", e)
				this.currentIndex = e.detail.current
				this.$forceUpdate()
			},
			confirm(item) {
				this.$emit('confirm', item)
			}
		}
	}
</script>

<style lang="scss">
	.cc-banner-wrap {
		width: 100%;
		image-rendering: -webkit-optimize-contrast;
		position: relative;

		&__swiper {
			height: 100%;
			width: 100%;

			&__item {
				width: 100%;
				height: 100%;
			}
		}

		&__bgSwiper {
			position: absolute;
			width: 100%;
			height: 100%;

			&__item {
				position: absolute;
				width: 100%;
				height: 100%; // 添加过渡属性，设置过渡时间为0.5秒
			}
		}
	}
</style>